<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css"/>
    <title>jQuery switch</title>

    <!-- icons -->
    <link rel="icon" href="../../../lib/image/favicon.ico"/>
    <link rel="shortcut icon" href="../../../lib/image/favicon.ico"/>
</head>
<body>

<div class="switch" id="switch-fade">
    <ul class="switch-box">
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="I love you not because of who you are, but because of who I am when I am with you" class="hidden" src="images/image1.jpg"/></a></div>
        </li>
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="To the world you may be one person, but to one person you may be the world." class="hidden" src="images/image2.jpg"/></a></div>
        </li>
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="Love me little, love me long!" class="hidden" src="images/image3.jpg"/></a></div>
        </li>
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="Where there is great love, there are always miracles." class="hidden" src="images/image4.jpg"/></a></div>
        </li>
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="The darkness is no darkness with thee." class="hidden" src="images/image5.jpg"/></a></div>
        </li>
    </ul>
</div>

<div class="switch" id="switch-slideUp">
    <ul class="switch-box">
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="I love you not because of who you are, but because of who I am when I am with you" class="hidden" src="images/image1.jpg"/></a></div>
        </li>
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="To the world you may be one person, but to one person you may be the world." class="hidden" src="images/image2.jpg"/></a></div>
        </li>
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="Love me little, love me long!" class="hidden" src="images/image3.jpg"/></a></div>
        </li>
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="Where there is great love, there are always miracles." class="hidden" src="images/image4.jpg"/></a></div>
        </li>
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="The darkness is no darkness with thee." class="hidden" src="images/image5.jpg"/></a></div>
        </li>
    </ul>
</div>
<div class="switch" id="switch-slideRight">
    <ul class="switch-box">
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="I love you not because of who you are, but because of who I am when I am with you" class="hidden" src="images/image1.jpg"/></a></div>
        </li>
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="To the world you may be one person, but to one person you may be the world." class="hidden" src="images/image2.jpg"/></a></div>
        </li>
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="Love me little, love me long!" class="hidden" src="images/image3.jpg"/></a></div>
        </li>
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="Where there is great love, there are always miracles." class="hidden" src="images/image4.jpg"/></a></div>
        </li>
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="The darkness is no darkness with thee." class="hidden" src="images/image5.jpg"/></a></div>
        </li>
    </ul>
</div>
<div class="switch" id="switch-slideDown">
    <ul class="switch-box">
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="I love you not because of who you are, but because of who I am when I am with you" class="hidden" src="images/image1.jpg"/></a></div>
        </li>
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="To the world you may be one person, but to one person you may be the world." class="hidden" src="images/image2.jpg"/></a></div>
        </li>
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="Love me little, love me long!" class="hidden" src="images/image3.jpg"/></a></div>
        </li>
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="Where there is great love, there are always miracles." class="hidden" src="images/image4.jpg"/></a></div>
        </li>
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="The darkness is no darkness with thee." class="hidden" src="images/image5.jpg"/></a></div>
        </li>
    </ul>
</div>

<div class="switch" id="switch-slideLeft">
    <ul class="switch-box">
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="I love you not because of who you are, but because of who I am when I am with you" class="hidden" src="images/image1.jpg"/></a></div>
        </li>
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="To the world you may be one person, but to one person you may be the world." class="hidden" src="images/image2.jpg"/></a></div>
        </li>
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="Love me little, love me long!" class="hidden" src="images/image3.jpg"/></a></div>
        </li>
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="Where there is great love, there are always miracles." class="hidden" src="images/image4.jpg"/></a></div>
        </li>
        <li class="item">
            <div class="item-img"><a href="#" title="" target="_blank"><img alt="The darkness is no darkness with thee." class="hidden" src="images/image5.jpg"/></a></div>
        </li>
    </ul>
</div>



<script src="../../../lib/js/jquery-1.9.0.min.js"></script>
<script src="js/jquery-switch_plus.js"></script>
<script>
    $('#switch-fade').nSwitch_plus();

    $('#switch-slideUp').nSwitch_plus({
        effect:'slide-up'
    });
    $('#switch-slideRight').nSwitch_plus({
        effect:'slide-right'
    });
    $('#switch-slideDown').nSwitch_plus({
        effect:'slide-down'
    });
    $('#switch-slideLeft').nSwitch_plus({
        effect:'slide-left'
    });

</script>
</body>
</html>